<style scoped>
.disabled-link {
    pointer-events: none;
    cursor: not-allowed;
    text-decoration: none;
}

.page-item.active .page-link {
    background-color: #FF5364;
    border-color: #FF5364;
    color: #fff;
}

.page-link {
    margin-right: 15px;
    border: 1px solid #FFDEDA;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.page-link:hover {
    font-weight: bold;
}
</style>
<template>
    <div class="" v-if="nums > 1">

        <ul class="flex items-center">
            <li class="page-item prev" :class="{ 'disabled-link': current === 1 }">
                <a class="page-link" href="javascript:void(0)" @click="hPrev" tabindex="-1">
                    < </a>
            </li>
            <li v-for="(i, idx) in numList" @click="hClick(i, idx)" :key="i" class="page-item"
                :class="{ 'active': i === current }">
                <a class="page-link" href="javascript:void(0)">{{ i }}</a>
            </li>
            <!-- <li class="page-item">
                    <a class="page-link" href="javascript:void(0)">{{ nums }}</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0)">...</a>
                </li>
                <li class="page-item">
                </li> -->


            <li class="page-item prev" :class="{ 'disabled-link': current === nums }">
                <a class="page-link" href="javascript:void(0)" @click="hNext"> > </a>
            </li>
        </ul>

    </div>
</template>

<script setup>

const emit = defineEmits(['update:current', 'previous', 'next', 'pageChange'])

const hPrev = () => {
    emit('pageChange', props.current - 1)
}

const hNext = () => {
    emit('pageChange', props.current + 1)
}

const hClick = (page, idx) => {

    if (page === '...' && idx == 1) {
        emit('pageChange', numList.value[2] - 1)
    }
    else if (page === '...' && idx == numList.value.length - 2) {
        console.log(numList.value[numList.value.length - 3])
        emit('pageChange', numList.value[numList.value.length - 3] + 1)
    }
    else hPageChange(page)
}
const hPageChange = (page) => {
    if (page < 1 || page > nums.value)
        return
    if (page === props.current)
        return

    emit('pageChange', page)
}

// 实际的最大的页码数
const nums = computed(() => {
    return Math.ceil(props.total / props.pageSize)
})

const numList = computed(() => {
    if (nums.value < props.pagerCount) {
        return Array.from({ length: nums.value }, (_, i) => i + 1)
    }
    let start = props.current - Math.floor(props.pagerCount / 2)
    if (start < 1) {
        start = 1
    }
    let end = start + props.pagerCount - 1
    if (end > nums.value) {
        end = nums.value
        start = end - props.pagerCount + 1
    }

    let rs = Array.from({ length: end - start + 1 }, (_, i) => start + i)
    if (start > 1) {
        rs = [1, '...', ...rs]
    }
    if (end < nums.value - 1) {
        rs = [...rs, '...', nums.value]
    }
    return rs

    // 返回一个数组，包含从start到end的连续数字
})

const props = defineProps({
    // 总数量
    total: {
        type: Number,
        required: true,
        default: 100
    },
    current: {
        type: Number,
        required: false,
        default: 1
    },
    pageSize: {
        type: Number,
        required: false,
        default: 10
    },
    pagerCount: {
        type: Number,
        required: false,
        default: 9
    }
})
</script>

<style scoped>
.disabled-link {
    pointer-events: none;
    cursor: not-allowed;
    text-decoration: none;
    /* 可选，去除下划线 */
}

.disabled-link .fas {
    color: #ccc;
    /* 可选，改变颜色为灰色 */
}
</style>